<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="change">
        <el-tab-pane label="日线" name="daily">
            <mean-daily-close-echart v-if="activeName === 'daily'"></mean-daily-close-echart>
        </el-tab-pane>
        <el-tab-pane label="周线" name="week">
            <Mean300dCloseEchart v-if="activeName === 'week'"></Mean300dCloseEchart>
        </el-tab-pane>
        <el-tab-pane label="操作" name="op">
            <LastedOperationRefine v-if="activeName === 'op'"></LastedOperationRefine>
        </el-tab-pane>
        <el-tab-pane label="分位点走势图" name="level_point_echart">
            <level-point-echart v-if="activeName === 'level_point_echart'"></level-point-echart>
        </el-tab-pane>
        <el-tab-pane label="日线热力图" name="daily_level_point_echart">
            <StockDailyPctHeatMapEchart v-if="activeName === 'daily_level_point_echart'"></StockDailyPctHeatMapEchart>
        </el-tab-pane>
        <el-tab-pane label="日线砖形图" name="stock_daily_renko_echart">
            <StockDailyRenkoEchart v-if="activeName === 'stock_daily_renko_echart'"></StockDailyRenkoEchart>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
import { ref } from 'vue'

import MeanDailyCloseEchart from '../components/MeanDailyCloseEchart.vue'
import Mean300dCloseEchart from '../components/Mean300dCloseEchart.vue'
import LevelPointEchart from '../components/LevelPointEchart.vue'
import StockDailyPctHeatMapEchart from '../components/StockDailyPctHeatMapEchart.vue'
import StockDailyRenkoEchart from '../components/StockDailyRenkoEchart.vue'
import LastedOperationRefine from '../components/operation/LastedOperationRefine.vue'

const activeNameKey = "MeanLineActiveName"
const activeName = ref(sessionStorage.getItem(activeNameKey) || 'week')

const change = (tabName) => {
    sessionStorage.setItem(activeNameKey, tabName)
}
</script>